<template>
    <div class="tab-content">
        <div class="breeding-section">
            <div class="section-header">
                <h4>屠宰信息</h4>
                <div class="section-actions">
                    <el-button type="primary" size="small" plain>设置</el-button>
                </div>
            </div>
            <div v-if="loading" class="loading-container">
                <el-skeleton :rows="4" animated />
            </div>
            <template v-else>
                <div class="info-grid">
                    <div class="info-row">
                        <span class="info-label">批次：</span>
                        <span class="info-value">{{ slaughterInfo.productionBatch }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">到厂时间：</span>
                        <span class="info-value">{{ formatDateTime(slaughterInfo.arrivalTime) }}</span>
                    </div>
                </div>
                <div class="info-grid right-grid">
                    <div class="info-row">
                        <span class="info-label">到厂均重：</span>
                        <span class="info-value">{{ slaughterInfo.averageWeight }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">屠宰时间：</span>
                        <span class="info-value">{{ formatDateTime(slaughterInfo.slaughterTime) }}</span>
                    </div>
                </div>
            </template>
        </div>

        <div class="breeding-section">
            <div class="section-header">
                <h4>相关资质</h4>
            </div>
            <div class="certificate-container">
                <div class="certificate-images">
                    <div class="certificate-item">
                        <div class="certificate-image">
                            <img src="https://via.placeholder.com/150" alt="资质证明1" />
                        </div>
                        <el-button type="primary" size="small">查看检疫</el-button>
                    </div>
                    <div class="certificate-item">
                        <div class="certificate-image">
                            <img src="https://via.placeholder.com/150" alt="资质证明2" />
                        </div>
                        <el-button type="primary" size="small">宰后检验</el-button>
                    </div>
                    <div class="add-image">
                        <el-button type="primary" plain class="add-button">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <div class="breeding-section">
            <div class="section-header">
                <h4>企业信息</h4>
                <div class="section-actions">
                    <el-button type="primary" size="small" plain>设置</el-button>
                </div>
            </div>
            <div v-if="loading" class="loading-container">
                <el-skeleton :rows="4" animated />
            </div>
            <div v-else class="company-info">
                <div class="info-row">
                    <span class="info-label">公司名称：</span>
                    <span class="info-value">{{ slaughterInfo.companyName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">公司地址：</span>
                    <span class="info-value">{{ slaughterInfo.companyAddress }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">成立时间：</span>
                    <span class="info-value">{{ formatDate(slaughterInfo.foundingTime) }}</span>
                </div>
                <div class="info-row full-width">
                    <span class="info-label">公司简介：</span>
                    <span class="info-value company-desc">
                        {{ slaughterInfo.companyDescription }}
                    </span>
                </div>
            </div>
        </div>

        <div class="breeding-section">
            <div class="section-header">
                <h4>企业照片</h4>
            </div>
            <div class="company-images">
                <div class="image-grid">
                    <div class="company-image">
                        <img src="https://via.placeholder.com/150x100" alt="企业照片1" />
                    </div>
                    <div class="company-image">
                        <img src="https://via.placeholder.com/150x100" alt="企业照片2" />
                    </div>
                    <div class="add-image">
                        <el-button type="primary" plain class="add-button">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { slaughterService, type SlaughterInfoResponseDto } from '@/http/slaughterService'
import { ElMessage } from 'element-plus'

// 接收父组件传递的批次信息
const props = defineProps<{
    productionBatch: string
}>()

// 加载状态
const loading = ref(true)

// 屠宰信息数据
const slaughterInfo = ref<SlaughterInfoResponseDto>({
    slaughterId: '',
    productionBatch: '',
    arrivalTime: '',
    averageWeight: '',
    slaughterTime: '',
    companyName: '',
    companyAddress: '',
    foundingTime: '',
    companyDescription: ''
})

// 格式化日期时间
const formatDateTime = (dateTimeString: string) => {
    if (!dateTimeString) return ''

    const date = new Date(dateTimeString)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hours = date.getHours().toString().padStart(2, '0')
    const minutes = date.getMinutes().toString().padStart(2, '0')
    const seconds = date.getSeconds().toString().padStart(2, '0')

    return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
}

// 格式化日期
const formatDate = (dateString: string) => {
    if (!dateString) return ''

    const date = new Date(dateString)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()

    return `${year}年${month}月${day}日`
}

// 获取屠宰信息
const fetchSlaughterInfo = async () => {
    try {
        loading.value = true
        const result = await slaughterService.getSlaughterInfoByBatch(props.productionBatch)
        if (result.success) {
            slaughterInfo.value = result.data
        } else {
            ElMessage.error(result.message || '获取屠宰信息失败')
        }
    } catch (error) {
        console.error('获取屠宰信息失败:', error)
        ElMessage.error('获取屠宰信息失败')
    } finally {
        loading.value = false
    }
}

// 组件挂载时获取数据
onMounted(() => {
    fetchSlaughterInfo()
})
</script>

<style scoped>
/* 复用之前的样式 */
.breeding-section {
    background-color: #f9fafc;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.section-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header h4 {
    font-size: 18px;
    margin-bottom: 0;
    color: #333;
}

.section-actions {
    display: flex;
    gap: 10px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.info-row {
    margin-bottom: 15px;
    display: flex;
}

.info-label {
    width: 120px;
    color: #666;
    font-weight: bold;
}

.info-value {
    color: #333;
}

.full-width {
    grid-column: 1 / -1;
}

.company-desc {
    display: block;
    margin-top: 5px;
    line-height: 1.6;
    color: #606266;
    max-height: 100px;
    overflow-y: auto;
}

.certificate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.certificate-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

.certificate-images {
    display: flex;
    align-items: center;
    gap: 10px;
}

.certificate-image {
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    max-width: 150px;
    max-height: 150px;
    object-fit: cover;
}

.add-image {
    flex-shrink: 0;
}

.add-button {
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
}

.company-info {
    margin-top: 20px;
}

.company-images .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.company-image {
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    overflow: hidden;
}

.company-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 加载状态样式 */
.loading-container {
    padding: 20px 0;
}
</style>